<template>
<div>
 	<x-button type="primary" @click.native="show=true">{{dialog.name}}</x-button>
	
	<popup v-model="show" height="100%">
		<div v-if="dialog.style=='list'">
			<ab-cust-dialog-show-list :dialog="dialog" :initData="initData"> </ab-cust-dialog-show-list>
			<group :style="btnStyle">
				<flexbox :gutter="0">
			      	<flexbox-item>
						<x-button @click.native="getData()">确定</x-button>
					</flexbox-item>
			      	<flexbox-item>
						<x-button @click.native="show=false">取消</x-button>
			      	</flexbox-item>
		    	</flexbox>
		    </group>
		</div>
	</popup>
</div>
</template>

<script>

import Vue from 'vue';
//注册AbCustDialogShowList
import AbCustDialogShowList from '@/components/form/abCustDialogShowList.vue';
Vue.component('abCustDialogShowList', AbCustDialogShowList);
import { Popup } from 'vux';
Vue.component('popup', Popup);
import { XButton } from 'vux';
Vue.component('x-button', XButton);
import { Group } from 'vux';
Vue.component('group', Group);
import { Flexbox, FlexboxItem } from 'vux';
Vue.component('flexbox', Flexbox);
Vue.component('flexbox-item', FlexboxItem);

/**
 * 自定义对话框，使用实例如下：
 * <ab-cust-dialog dialogKey="userSelector" :dialogSetting="dialogSetting" value-name="name" value-mobile="mobile"></ab-cust-dialog>
 * props:["dialogKey","dialogSetting"],//dialogKey:列表对话框的key;dialogSetting:对话框的配置修改
 * 值映射采用了属性映射标记的方式（跟pc端一样） value-对话框返回字段 = 父data的一个数据
 * 如果配置了list属性，则会把返回值push到list对象中 跟pc端一样 只增不减（如果不配置list会有初始化行为，有list不会有初始化选项的行为）
 * <ab-cust-dialog dialogKey="userSelector" :dialogSetting="dialogSetting" list="list" value-name="name" value-mobile="mobile"></ab-cust-dialog>
 */
export default {
	props:["dialogKey","dialogSetting"],//dialogKey:列表对话框的key;dialogSetting:对话框的配置修改
	data: function () {
	  return {
		  show:false,
		  btnStyle:{
			  "margin-top":window.innerHeight*0.80+"px"
		  },
		  dialog:{},
		  initData:[],
		  valueMap:{}
	  }
	},
	created : function(){
		var that = this;
		//获取对话框数据
    	var url = Vue.__ctx + "/form/formCustDialog/getObject";
    	var post = Vue.baseService.postForm(url,{
    		key : this.dialogKey
		});
    	Vue.tools.getResultData(post,function(data){
    		that.dialog = data;
    		if(that.dialogSetting){
    			Object.assign(that.dialog,that.dialogSetting);
    		}
    	});
    	
    	//映射关系
		for(var key in this.$attrs){
			var val = this.$attrs[key];
			// 找到value开头的赋值配置
			if (key.indexOf("value-") !== 0) {
				continue;
			}
			var name = key.replace("value-", "");
			this.valueMap[name] = val;
		};
    	
		this.initData = this.getInitData();
    	
	},
	methods: {
		getData:function(){
			var that = this;
			var popup = null;//获取到popup这层组件
			this.$children.forEach(function(item){
				if(item.$vnode.tag.indexOf("popup")>-1){
					popup = item;
				}
			});
			var dialog = null;//获取组件对象
			popup.$children.forEach(function(item){
				if(that.dialog.style==="list"){
					if(item.$vnode.tag.indexOf("abCustDialogShowList")>-1){
						dialog = item;
					}	
				}
				if(that.dialog.style==="tree"){
					if(item.$vnode.tag.indexOf("abCustDialogShowTree")>-1){
						dialog = item;
					}	
				}
			});
			var data = dialog.getData();//调用组件函数
			this.handleData(data);
			this.show = false;//关闭popup
		},
		//处理返回数据
		handleData:function(data){
			var valueMap = this.valueMap;
			
			if(this.$attrs.hasOwnProperty("list")){//组件上绑定了list
				var list = eval("this.$parent."+this.$attrs.list);
				if(!list){
					list = [];
					eval("this.$parent."+this.$attrs.list+"=list");
				}
				
				data.forEach(function(item){
					if(JSON.stringify(valueMap)==="{}"){//无映射关系则把数据全返回
						list.push(item);
					}
					
					var json = {};
					//处理映射关系
					for(var key in valueMap){
						var val = valueMap[key];
						//如果val是a.b这样的，则需要对json.a初始化，不然直接操作json.a.b会报错
						var strs = val.split(".");
						var exp = "json";
						for (var i=0;i<strs.length-1;i++){
							exp = exp + "."+strs[i];
							if(eval("!"+exp)){//为空则初始化
								eval(exp+" = {};");
							}
						}
						eval("json."+val+" = item[key];");
					}
					list.push(json);
				});
			}else{//组件没绑定了list
				for(var key in valueMap){
					var val = valueMap[key];
					var list = [];
					data.forEach(function(item) {
						list.push(item[key]);
					});
					eval("this.$parent." + val + " = list.join(',');");
				}
			}
		},
		getInitData:function(){
			if(this.$attrs.hasOwnProperty("list")){//组件上绑定了list
				return [];
			}
			
			var initData = [];
			var json = null;
			for(var key in this.valueMap){
				var val = this.valueMap[key];
				var data = eval("this.$parent." + val );
				if(!data){
					return;
				}
				if(!json){
					json = {};
				}
				eval("json[key]=data");
			}
			
			if(!json){
				return initData;
			}
			
			//切割json中的,当作多选
			for(var key in json){
				var val = json[key];
				var list = val.split(",");
				var index = 0;
				
				list.forEach(function(item) {
					if(!initData[index]){
						initData[index] = {};
					}
					initData[index][key] = item;
					index++;
				});
			}
			
			return initData;
		}
	}
}
</script>
